---
description: Переключатель, позволяющий пользователям выбрать между парой противоположных состояний, например, включено/выключено.
---

<Overview group="forms">

# Switch [tag:component]

Переключатель, позволяющий пользователям выбрать между парой противоположных состояний,
например, включено/выключено.
Наследует все свойства нативного `<input type="checkbox">` с дополнительными возможностями кастомизации.

</Overview>

<Playground>
  ```jsx
  <Switch />
  ```
</Playground>

## Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение
React-компонентов, прочитать про это можно в [документации React](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable).

Для использования неконтролируемого режима достаточно просто _не_ передавать `checked` или передавать `defaultChecked`, если
требуется задать значение по умолчанию.
Для контролируемого режима используйте связку свойств `checked`/`onChange` для задания значения и его изменения.

```jsx
// Неконтролируемое состояние, по умолчанию в состоянии "выбран"
<Switch defaultChecked />;

// Контролируемое состояние, значение "не выбран"
const [checked, setChecked] = React.useState(false);

<Switch checked={checked} onChange={(event) => setChecked(event.target.checked)} />;
```

## Состояния

### `disabled`

Свойство `disabled` блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.

<Playground>
  ```jsx
  <Switch defaultChecked disabled />
  ```
</Playground>

## Кастомизация

Компонент поддерживает свойство `slotProps`, позволяющее переопределять свойства внутренних элементов, таких как корневой контейнер и скрытый `input`.

Это удобно для добавления кастомных классов, data-атрибутов, aria-атрибутов, обработчиков событий, доступов к элементам через `getRootRef` и других расширений, не влияя на внешний API компонента.

<Playground>
  ```jsx
  const inputRef = React.useRef();

  return (
    <Switch
      defaultChecked
      className="my-root-class"
      data-testid="switch-root"
      id="switch-input-id"
      slotProps={{
        root: {
          id: 'switch-root-id',
        },
        input: {
          className: 'my-input-class',
          'aria-label': 'switch',
          getRootRef: inputRef,
        },
      }}
    />
  )
  ```
</Playground>

## Доступность (a11y) [#a11y]

Доступность реализована на основе рекомендаций из [Switch WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).

## Свойства и методы [#api]

<PropsTable name="Switch" />
